<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page import="com.yyge.entity.Employee" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/5/10
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>员工列表</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--引入日期选择插件-->
     <script src="https://cdn.bootcdn.net/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/bootstrap-datetimepicker.js"></script>
     <link href="https://cdn.bootcdn.net/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/css/bootstrap-datetimepicker.css" rel="stylesheet">
     <script src="https://cdn.bootcdn.net/ajax/libs/smalot-bootstrap-datetimepicker/2.4.4/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>



</head>
<body>

<!--bootstrap提供的容器类-->
<div class="container">
    <table class="table table-striped table-bordered table-hover">
        <thead>
        <tr>
            <th>ID</th>
            <th>员工姓名</th>
            <th>呢称</th>
            <th>电话</th>
            <th>入职时间</th>
            <th>状态</th>
            <th>职位</th>
            <th>所属部门</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody class="text-center">
        <a href="http://localhost:8080/JavaWebTomCat/goods/add">新增员工</a>
        <c:forEach items="${pageInfo.list}" var="employee">
            <tr>
                <td>${employee.id}</td>
                <td>${employee.name}</td>
                <td>${employee.username}</td>
                <td>${employee.phone}</td>
                <td>
                 <input class="form_datetime form-control" type="text"
                        value="<fmt:formatDate value="${employee.entryTime}" pattern="yyyy-MM-dd"/>"
                 size="16" style="display: none;text-align: center;">
                 <%--  <div id="calendar-container"></div>--%>
                 <span class="formatDate"><fmt:formatDate value="${employee.entryTime}" pattern="yyyy-MM-dd"/></span>

                </td>
                <td class="align-middle">
                    <div class="btn-group" role="dialog" >
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled" >
                               <c:if test="${employee.status==0}">正常</c:if>
                               <c:if test="${employee.status==1}">离职</c:if>
                            <span class="caret" style="display:none"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-item"><a>正常</a></li>
                            <li class="dropdown-item"><a>离职</a></li>
                        </ul>
                    </div>
               </td>
                <td>

                    <div class="btn-group" role="dialog" >
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" disabled="disabled" >
                                <c:if test="${employee.position==0}">负责人</c:if>
                                <c:if test="${employee.position==1}">普通员工</c:if>
                            <span class="caret" style="display:none"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li class="dropdown-item"><a>负责人</a></li>
                            <li class="dropdown-item"><a>普通员工</a></li>
                        </ul>
                    </div>

                </td>
                <td>${employee.ofDepartment}</td>
                <td>
                   <button  type="button" onclick="this" class="btn btn-info">修改信息</button>
                   <button type="button" onclick="this" class="btn btn-danger">删除员工</button>
<%--                    <a href="delete.jsp?goodsId=${employee.id}">删除员工</a>--%>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>

    <div class="row clearfix">
        <div class="col-md-6 column">
            <ul class="pagination">
                <!--当前页不是第一页，则启用上一页按钮-->
                <c:if test="${!pageInfo.isFirstPage}">
                    <li>
                        <a href="http://localhost:8080/JavaWebTomCat/search?pageNum=${pageInfo.prePage}">上一页</a>
                    </li>
                </c:if>

                <!--如果当前页是第一页，则禁用上一页按钮-->
                <c:if test="${pageInfo.isFirstPage}">
                    <li class="disabled">
                        <a>上一页</a>
                    </li>
                </c:if>

                <c:forEach items="${pageInfo.navigatepageNums}" var="i">
                    <c:if test="${pageInfo.pageNum==i}">
                        <li class="active">
                            <a href="http://localhost:8080/JavaWebTomCat/search?pageNum=${i}">${i}</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum != i}">
                        <li>
                            <a href="http://localhost:8080/JavaWebTomCat/search?pageNum=${i}">${i}</a>
                        </li>
                    </c:if>

                </c:forEach>

                <!--当前页不是最后一页，则启用下一页按钮-->
                <c:if test="${!pageInfo.isLastPage}">
                    <li>
                        <a href="http://localhost:8080/JavaWebTomCat/search?pageNum=${pageInfo.nextPage}">下一页</a>
                    </li>
                </c:if>
                <!--当前页是最后一页，则禁用下一页按钮-->
                <c:if test="${pageInfo.isLastPage}">
                    <li class="disabled">
                        <a>下一页</a>
                    </li>
                </c:if>
            </ul>
        </div>

    </div>

</div>
<script type="text/javascript">
    $(".form_datetime").datetimepicker({
        format: "yyyy-mm-dd",
        autoclose: true,
        todayBtn: true,
        todayHighlight: true,
        showMeridian: true,
        pickerPosition: "bottom-left",
        language: 'zh-CN',//中文，需要引用zh-CN.js包
        startView: 2,//月视图
        minView: 2//日期时间选择器所能够提供的最精确的时间选择视图
    });
    $(function () {
        // 绑定 change.dp 事件
        $('.form_datetime').on('change.dp', function (e) {

            e.target.parentElement.getElementsByClassName("formatDate")[0].innerHTML=e.target.value
            console.log(e.target.value);
        });
    });/*日期选择监听*/
    Array.from(document.getElementsByTagName("td")).map(function(x){
     x.style.verticalAlign="middle"
    })
    Array.from(document.getElementsByTagName("th")).map(function(x){
     x.style.textAlign="center"
    })

    /**
     * 批量修改按钮颜色
     */
    let autoButtonColor=function (){
        Array.from(document.querySelectorAll("button")).map(v=>{
            if(v.innerText=="正常"){v.classList.add("btn-success")}
            if(v.innerText=="离职"){v.classList.remove("btn-success")}
        })
    }
    autoButtonColor()//修改按钮颜色

    /*Js发送请求POSt*/
    let sendPost=function (body){
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE) { // 当请求已完成时
            if (xhr.status === 200) { // 当状态码为 200 时
               MoDialog("提示","员工数据修改成功！"+xhr.status)
            } else {
               MoDialog("错误","员工数据修改失败！"+xhr.status)
              //console.error('请求失败', xhr.status);
            }
          }
        }

         xhr.open('POST',"#");
         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8');
         //const data = 'name=' + encodeURIComponent('张三') + '&age=' + encodeURIComponent(18);
         xhr.send(body);
    }

    /*保存信息→传入元素本身的父类 也就是当前元素的tr*/
    let saveInfo=function (v){
        /*这里放需要专门设置的选项*/
        statusNum=v.children[5].innerText=="正常"?1:0;
        positionNum=v.children[6].innerText=="负责人"?0:1;
        /*type=2 根据主键修改内容*/
        let data="type="+encodeURIComponent(2)
        +"&id="+encodeURIComponent(v.children[0].innerText)
        +"&name="+encodeURIComponent(v.children[1].innerText)
        +"&username="+encodeURIComponent(v.children[2].innerText)
        +"&phone="+encodeURIComponent(v.children[3].innerText)
        +"&entryTime="+encodeURIComponent(v.children[4].innerText)
        +"&status="+encodeURIComponent(statusNum)
        +"&position="+encodeURIComponent(positionNum)
        sendPost(data)
    }

    /*判断是否有表正在被编辑*/
    let editStatus=function(){
        let statu=-1;
        Array.from(document.querySelectorAll(".btn.btn-info")).map(x=>{
            if(x.innerText=="保存"){
                statu=1;
                return statu;
            }
        })
        return statu
    }
    console.log(editStatus())

    /**
     * 点击编辑时修改的内容
     * type=true为用户点击按钮后开始编辑
     */
    let modifyBody=function (eme,type){
        if(type){
          eme.style.color="#3abf38"//修改字体颜色
          eme.style.fontWeight="bold"//修改字体加粗
          //隐藏原有控件
          eme.getElementsByClassName("formatDate")[0].style.display="none"
          //显示日期选择控件
          eme.getElementsByClassName("form_datetime form-control")[0].style.display="inline-block"

        }else{
          eme.style.color="unset"//修改字体颜色
          eme.style.fontWeight="unset"//修改字体加粗
          let selectInput=eme.getElementsByClassName("form_datetime form-control")[0]
          let emeSpan=eme.getElementsByClassName("formatDate")[0]
          //隐藏日期选择控件
          selectInput.style.display="none"

          //显示原有控件
         emeSpan.style.display="inline-block"
        }

     }
    /*设置button-修改信息按钮点击事件*/
    Array.from(document.querySelectorAll(".btn.btn-info")).map(x=>{
      x.addEventListener("click",y=>{
         if(y.target.innerText=="修改信息" && editStatus()==-1){
          let tr=y.target.parentElement.parentElement
          modifyBody(tr,true);//更改样式

          Array.from(tr.children).filter((x,index,arr)=>{
              return index!=arr.length-1
          }).map(q=>{
              let emeButt=q.getElementsByTagName("button")[0];
              if(emeButt){
                 emeButt.removeAttribute("disabled")//设置点击下拉
                  let ico=emeButt.getElementsByClassName("caret")[0];
                  if(ico){ico.style.display="inline-block"}//显示点击下拉的图标
              }else{
                 q.contentEditable=true;/*修改为可编辑Jsp*/
              }

          })
          y.target.innerHTML="保存"
         }else{
             if(y.target.innerText=="保存"){
              let tr=y.target.parentElement.parentElement
              modifyBody(tr,false);//更改样式
              saveInfo(y.target.parentElement.parentElement)//发送post



              Array.from(tr.children).filter((x,index,arr)=>{
                  return index!=arr.length-1
              }).map(q=>{
                  let emeButt=q.getElementsByTagName("button")[0];
                  if(emeButt){
                     emeButt.setAttribute("disabled","disabled")//禁止点击下拉
                      let ico=emeButt.getElementsByClassName("caret")[0];
                      if(ico){ico.style.display="none"}//隐藏点击下拉的图标
                  }else{
                     q.contentEditable=false;/*修改为不可编辑*/
                  }
                  autoButtonColor()//修改按钮颜色
              })
              y.target.innerHTML="修改信息"
             }
         }

      })
    })

    /**
     * 为所有的下拉选项框设置点击事件并将内容设置到button 的innerHTML
     */
    let setDropdown=function (){
     Array.from(document.querySelectorAll(".btn-group .dropdown-item")).map(m=>{
         m.addEventListener("click",q=>{
           q.target.parentElement.parentElement.parentElement.children[0].innerHTML=
               q.target.innerHTML +`
                                <span class="caret" style="display: inline-block;"></span>
                           `
         })
     })
    }

    setDropdown()/*设置按钮事件*/
    MoDialog=function (title,info1,info2,info3,info4){
        var ModalAr = document.createElement("div");
        ModalAr.classList.add("modal");
        ModalAr.classList.add("fade");
        ModalAr.setAttribute("id","exampleModal");
        ModalAr.setAttribute("tabindex","-1")
        ModalAr.setAttribute("role","dialog")
        ModalAr.setAttribute("aria-labelledby","exampleModalLabel")
        ModalAr.setAttribute("aria-hidden","true")
        ModalAr.innerHTML=`
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel">`+title+`</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
            `+info1+`
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary">确定</button>
            </div>
          </div>
        </div>
        `
        if(!document.getElementById("exampleModal")){
          document.getElementsByClassName("container")[0].insertAdjacentElement("afterbegin", ModalAr)
        }else{
            document.getElementById("exampleModalLabel").innerHTML=title;
            document.getElementsByClassName("modal-body")[0].innerHTML=info1;
        }
       $("#exampleModal").modal('show')
    }


</script>
</body>
</html>
